Pictoris

Medium

HTML 5, CSS 3

Tools

Atom text editor

Abstract

A renewed hunt for employment requires a refreshed site design.

The goal of this design refresh is to update the underlying technologies of the website, whilst retaining the core aesthetic.

To this end the old XHTML 1.1 & CSS 2 have been replaced with HTML 5 & CSS 3, taking advantage of new features of both standards, as well as improvements in browser render consistency, to bring a more consist look and feel to the website.

The somatic markup elements in HTML 5 enable the definition of content and structural elements in a more sophisticated manner than ID tags alone, and the further separation of markup from formatting has allowed the code to be greatly simplified from its previous incarnation.

On the formatting front, the sites colours are defined using CSS variables for consistency and convenience; the new “flex box” block display mode has been deployed to create columnated layouts in the place of the somewhat cumbersome floating DIVs method. The page layout has been reshaped to accommodate widesceen and portrait aspect ratio displays, which largely didn’t exist when the website was first created.

On an aesthetic front, the site logo has been replaced with an svg for improved clarity as all resolutions, and a web font from the Google fonts library has been chosen for more consistent text rendering across multiple platforms, specifically Sorts Mill Goudy, an open source implementation of Goudy Old Style, which has been chosen for both its appearance, and its excellent legibility.

In addition, this design refresh added an ‘@media print’ reactive styling statement to the CSS, which reformats the pages to be a more printer friendly black text on white background, also replacing several of the shaded backgrounds with outlines.